<template>
  <div class="result-list-sidebar">
    <div class="sidebar-header">成果列表</div>

    <!-- Condition Filtering -->
    <el-form :inline="true" :model="filters" size="small" class="filters-form">
      <el-form-item label="名称">
        <el-input
          v-model="filters.name"
          placeholder="请输入名称"
          size="small"
        />
      </el-form-item>

      <!-- Start and End Time Filter -->
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="filters.startTime"
          type="datetime"
          placeholder="选择开始时间"
          size="small"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="结束时间">
        <el-date-picker
          v-model="filters.endTime"
          type="datetime"
          placeholder="选择结束时间"
          size="small"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="备注">
        <el-input
          v-model="filters.remark"
          placeholder="请输入备注"
          size="small"
        />
      </el-form-item>
    </el-form>

    <el-table
      :data="filteredItems"
      size="small"
      :border="true"
      style="
        margin: 10px 0;
        background-color: rgba(255, 255, 255, 0.15);
        min-height: 400px;
        border-radius: 6px;
      "
      @row-click="onRowClick"
      :row-class-name="rowClassName"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="time" label="监测时间" />
      <el-table-column prop="remark" label="备注" />

      <!-- Action Column -->
      <el-table-column :align="'center'" label="报告">
        <template v-slot="scope">
          <el-button
            size="small"
            @click="editItem(scope.row)"
            type="primary"
            plain
            >评估</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- Pagination -->
    <el-pagination
      :page-size="pageSize"
      :current-page="currentPage"
      :total="filteredItems.length"
      @current-change="handlePageChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next"
      style="text-align: center; margin-top: 20px; padding: 10px 0"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps, computed } from "vue";
import type { PropType } from "vue";

interface ResultItem {
  name: string;
  time: string;
  remark: string;
}

// Props to accept external result items
const props = defineProps({
  resultItems: {
    type: Array as PropType<ResultItem[]>,
    required: true,
  },
});

// Event notifications for parent components
const emit = defineEmits(["report"]);

// Local selection tracking
const selectedIndex = ref(-1);

// Filters for condition-based queries
const filters = ref({
  name: "",
  startTime: null, // Start time for filtering
  endTime: null, // End time for filtering
  remark: "",
});

// Paginated data
const pageSize = ref(5);
const currentPage = ref(1);

// Filtered result items based on conditions
const filteredItems = computed(() => {
  return props.resultItems.filter((item) => {
    // Filter by name
    const isNameMatch = item.name.includes(filters.value.name);

    // Filter by start and end time
    const isTimeMatch =
      (!filters.value.startTime ||
        new Date(item.time) >= new Date(filters.value.startTime)) &&
      (!filters.value.endTime ||
        new Date(item.time) <= new Date(filters.value.endTime));

    // Filter by remark
    const isRemarkMatch = item.remark.includes(filters.value.remark);

    return isNameMatch && isTimeMatch && isRemarkMatch;
  });
});

// Row click event handler
const onRowClick = (row: ResultItem, index: number) => {
  selectedIndex.value = index;
};

// Pagination page change handler
const handlePageChange = (page: number) => {
  currentPage.value = page;
};

// Page size change handler
const handleSizeChange = (size: number) => {
  pageSize.value = size;
};

// Row class name based on selection
const rowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex === selectedIndex.value ? "selected-row" : "";
};

// Edit item handler
const editItem = (item: ResultItem) => {
  emit('report',item)
  // Implement edit logic
};

// Delete item handler
const deleteItem = (item: ResultItem) => {
  console.log("Deleting item:", item);
  // Implement delete logic
};
</script>

<style scoped lang="scss">
.result-list-sidebar {
  background: linear-gradient(
    0deg,
    #0b283b,
    rgba(21, 30, 40, 0.8)
  ); /* Darker background for better contrast */
  color: #d1e5ff;
  padding: 15px;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(209, 229, 255, 0.5);
}

.filters-form {
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.el-form-item {
  width: 100%;
}

.el-pagination {
  margin-top: 20px;
  padding: 10px 0;
}

.el-input,
.el-button {
  margin-bottom: 10px;
}
</style>
<style lang="scss">
.el-table {
  --el-table-header-bg-color: #1b384d9c !important;
  --el-table-tr-bg-color: #2a57779c !important;
  --el-table-border-color: rgb(109, 194, 236);
  --el-table-row-hover-bg-color: #152b3a9c !important;

  tr {
    cursor: pointer;
    color: #ccc;
    background: none;
  }

  .el-table__body tr.current-row > td.el-table__cell {
    background-color: #0c1b2975;
    color: #fff;
  }
}
</style>
